<template>
  <router-link to="/" class="good-item" >
    <img :src="cateGoods.picture" alt="">
    <p class="name">{{cateGoods.name}}</p>
    <p class="desc">{{cateGoods.desc}}</p>
    <p class="price">￥{{cateGoods.price}}</p>
  </router-link>
</template>

<script>
export default {
  props: {
    cateGoods: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="less">
.good-item{
    width: 220px;
    padding: 20px 30px;
    text-align: center;
    &:hover{
        transform: translate3d(0,-3px,0);
        // transform: translateY(-5px);
        box-shadow:0 3px 8px rgba(0, 0, 0, 0.3);
        transition: all 0.5s;
    }
    p{
        padding-top: 10px;
    }
    img{
        width: 160px;
        height: 160px;
    }
    .name{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 150px;
        text-align: center;
    }
    .desc{
        width: 150px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #999;
    }
    .price{
        color: @priceColor;
        font-size: 20px;
    }
}
</style>
